<template>
  <div class="container">
    <el-card class="box-card">
      <el-row>
        <el-col :span="18">
          <el-form
            :inline="true"
            :model="searchForm"
            class="demo-form-inline"
          >
            <el-form-item label="关键字">
              <el-input
                v-model="searchForm.keyword"
                placeholder="关键字"
              />
            </el-form-item>
            <el-form-item label="状态">
              <el-select
                v-model="searchForm.state"
                placeholder="状态"
              >
                <el-option
                  label="禁止"
                  value="0"
                />
                <el-option
                  label="启用"
                  value="1"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                size="small"
                @click="clearBtn"
              >清空</el-button>
              <el-button
                size="small"
                type="primary"
                @click="searchBtn"
              >搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 新增技巧 -->
        <el-col :span="6">
          <el-row
            type="flex"
            justify="end"
          >
            <el-button
              size="small"
              type="success"
              @click="showdialog=true"
            >
              <i class="el-icon-edit" />&nbsp;新增技巧
            </el-button>
          </el-row>
        </el-col>
      </el-row>
      <!--消息提示的文案 -->
      <el-row style="margin-top:6px">
        <el-col>
          <el-alert
            :title="`数据共${page.total}条`"
            type="info"
            :closable="false"
            show-icon
          />
        </el-col>
      </el-row>
      <!-- 表格信息 -->
      <el-row style="margin-top:10px">
        <el-col>
          <el-table
            :data="formlist"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
            />
            <el-table-column
              prop="title"
              label="文章标题"
              width="300px"
            >
              <template slot-scope="{row}">
                {{ row.title }}
                <a
                  v-if="row.videoURL"
                  class="el-icon-film"
                  @click="film(row)"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="visits"
              label="阅读数"
            />
            <el-table-column
              prop="username"
              label="录入人"
            />
            <el-table-column
              label="录入时间"
              width="150px"
            >
              <template slot-scope="{row}">
                {{ row.createTime | formatData }}
              </template>
            </el-table-column>
            <el-table-column
              prop="state"
              label="状态"
            >
              <template slot-scope="{row}">
                {{ row.state ===1 ? '已启用' : '禁止' }}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="200px"
            >
              <template slot-scope="{row}">
                <el-button
                  type="text"
                  size="small"
                  @click="articlesDig(row)"
                >预览</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="stateCut(row)"
                >
                  <span v-if="row.state ===1">启用</span>
                  <span v-else>禁用</span>
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  :disabled="row.state===0"
                  @click="eidtformDialog(row.id)"
                >修改</el-button>
                <el-button
                  type="text"
                  size="small"
                  :disabled="row.state===0"
                  @click="deleteBtn(row.id)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <el-row
        type="flex"
        justify="end"
        align="middle"
        style="height: 60px"
      >
        <div class="block">
          <el-pagination
            background
            layout="prev, pager,next,sizes,jumper"
            :current-page="page.page"
            :page-sizes="[1,5,15,20]"
            :page-size="page.pagesize"
            :total="page.total"
            @current-change="currentPage"
            @size-change="sizeChange"
          />
        </div>
      </el-row>
    </el-card>
    <el-dialog
      :title="showTitle"
      width="800px"
      :visible="showdialog"
      style="margin-top: 15px,"
      @close="brnCancel"
    >
      <el-form
        ref="articlesForm"
        label-width="120px"
        :model="formDialog"
        :rules="rules"
      >
        <el-form-item
          label="文章名称"
          prop="title"
        >
          <el-input
            v-model="formDialog.title"
            type="text"
            placeholder="请输入文章名称"
          />
        </el-form-item>
        <el-form-item
          label="文章内容"
          prop="articleBody"
        >
          <div>
            <quill-editor
              v-model="formDialog.articleBody"
              :options="editorOption"
              class="editor"
              @change="onEditorBlur"
            >
              >
            </quill-editor>
          </div>
          <!-- <Articles :content.sync='formDialog.articleBody' ></Articles> -->
        </el-form-item>
        <el-form-item
          label="视频地址"
          prop="videoURL"
        >
          <el-input
            v-model="formDialog.videoURL"
            type="text"
            placeholder="请填视频地址"
          />
        </el-form-item>
        <el-row
          type="flex"
          justify="end"
        >
          <el-col :span="6">
            <el-button
              size="small"
              type="primary"
              @click="btnOk"
            >确定</el-button>
            <el-button
              size="small"
              @click="brnCancel"
            >取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <el-dialog
      title="电影"
      :visible="divdialog"
      @close="btnCancel"
    >
      <div
        v-if="showanswer"
        class="video-tem"
      >
        <video-player
          ref="videoPlayer"
          class="video-player vjs-custom-skin"
          :playsinline="true"
          :options="playerOptions"
        />

      </div>
    </el-dialog>
    <Articlesdig
      :articlesdig="formDialog"
      :show-btn.sync="showBtn"
    />
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import moment from 'moment'
import Articlesdig from '../../components/articles/'
import { list, add, remove, update, detail, changeState } from '@/api/hmmm/articles'
// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ direction: 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ['clean'], // 清除文本格式-----['clean']
  ['image', 'video'] // 链接、图片、视频-----['link', 'image', 'video']
]
export default {
  name: 'One',
  components: {
    quillEditor,
    Articlesdig
  },
  // 定义时间过滤器
  filters: {
    formatData (val) {
      return moment(val).format('YYYY-MM-DD hh:mm:ss')
    }
  },

  data () {
    return {
      clearChangeEvent: false, //控制change事件的节流阀
      showanswer: false,
      // 这是视频组件
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: '' // url地址
          }
        ],
        hls: true,
        poster: '', // 你的封面地址
        width: document.documentElement.clientWidth, // 播放器宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      },
      editorOption: {
        //  富文本编辑器配置
        modules: {
          toolbar: toolbarOptions
        },
        theme: 'snow',
        placeholder: '请输入正文'
      },
      searchForm: {
        keyword: '',
        state: null
      },
      page: {
        total: 0, // 总数
        page: 1, // 当前页面
        pagesize: 5 // 每页最多显示多少数据
        // keyword: '', // 关键字
        // state: null// 状态 1 开启 0 屏蔽
      },
      formlist: [], // 表单数据
      showdialog: false,
      showBtn: false,
      divdialog: false,
      formDialog: {
        id: null,
        title: '', // 标题
        articleBody: '', // 文章正文
        videoURL: ''// 视频地址
      },
      rules: {
        title: [{ required: true, message: '文章名称不能为空', trigger: 'blur' }],
        articleBody: [{ required: true, message: '文章内容不能为空', trigger: 'blur' }]
      }
    }
  },

  computed: {
    showTitle () {
      return this.formDialog.id ? '编辑文章' : '新增文章'
    },
    // 当前富文本实例
    editor () {
      return this.$refs.myQuillEditor.quill
    },
    player () {
      return this.$refs.videoPlayer.player;
    }

  },
  created () {
    this.getlist()
  },

  methods: {
    searchBtn () {
      this.page.page = 1
      this.getlist()
    },
    // 获取表单数据
    async getlist () {
      const items = await list({ ...this.page, ...this.searchForm })
      this.formlist = items.data.items// 获取数据
      this.page.total = items.data.counts// 数据中页数
    },
    // 切换分页
    currentPage (newPage) {
      this.page.page = newPage
      this.getlist()// 重新获取数据
    },
    //动态改变每页条数
    sizeChange (value) {
      this.page.pagesize = value
      this.getlist()// 重新获取数据
    },
    // 切换禁用与启动
    async stateCut (val) {
      try {
        await changeState({
          id: val.id, state: val.state === 1 ? 0 : 1
        })

        this.getlist()// 重新加载数据

        this.$message.success('操作成功')
      } catch (error) {
        this.$message.error('操作失败', error)
      }
    },

    // 清空输入框数据
    async clearBtn () {
      this.searchForm = {
        keyword: '',
        state: null
      }
      this.searchBtn()
    },
    async deleteBtn (data) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'

        })
        // 删除员工接口
        await remove(data)
        // 从新获取列表
        this.getlist()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    //点击确认提交数据
    async btnOk () {
      this.$refs.articlesForm.validate(async isOk => {
        if (isOk) {
          if (this.formDialog.id) {
            // 如果有id编辑
            this.formDialog = await update(this.formDialog)
          } else {
            await add(this.formDialog)
          }
          this.$message.success('添加成功')
          this.getlist()
          this.showdialog = false
          this.clearChangeEvent = true
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    //取消按钮
    brnCancel () {
      // 清空表单
      this.formDialog = {
        title: '', // 标题
        articleBody: '', // 文章正文
        videoURL: ''// 视频地址
      }
      this.$refs.articlesForm.resetFields()
      this.showdialog = false
    },
    //点击修改回显数据
    async eidtformDialog (data) {
      // 回显数据

      const datas = await detail(data)
      this.formDialog = datas.data

      this.showdialog = true
    },
    //控制预览弹窗显示
    articlesDig (data) {
      this.formDialog = data
      this.showBtn = true

    },
    // 关闭视频弹窗
    btnCancel () {
      this.divdialog = false
      this.showanswer = false

    },
    // 视频预览
    film (row) {
      this.divdialog = true
      this.showanswer = true
      this.playerOptions.sources[0].src = row.videoURL
    },
    // cancelA () {
    //   this.divdialog = false
    // },

    // 准备富文本编辑器
    onEditorReady () { },
    // 富文本编辑器 内容改变事件
    onEditorBlur () {
      // 当点击确定时会触发表单清楚 这时候会再次触发表单校验的功能 第二次打开就变成了内容不能为空
      // 如何解决 当点击确定时不允许触发表单校验即可 
      // 用节流阀 点击确定时为true 进入if判断 结束校验的代码 顺便关闭节流阀 让下一次表单校验执行

      if (this.clearChangeEvent) {
        // true不让执行
        return this.clearChangeEvent = false
      }
      this.$refs.articlesForm.validateField('articleBody')
    }
  }
}
</script>

<style scoped lang='scss'>
.box-card {
  margin: 12px;
}
.el-icon-film {
  color: blue;
}
</style>
